<template>
  <div class="home">
    <h2>Home组件</h2>
    <h2>当前计数: {{ counter }}</h2>
    <button @click="counter++">+1</button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        counter: 0
      }
    },
    created() {
      console.log("Home组件被创建了");
    },
    mounted() {
      console.log("Home组件被挂载了");
    },
    unmounted() {
      console.log("Home组件被销毁了");
    },
    name: "home",
    // 对于保持keep-alive的组件,activated和deactivated生命周期函数会被调用,这里监听有没有进行切换
    // keep-alive组件进入活跃状态
    activated() {
      console.log("home: activated被调用了");
    },
    // keep-alive组件离开活跃状态
    deactivated() {
      console.log("home: deactivated被调用了");
    }
  }
</script>

<style scoped>
</style>